<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html">
<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Google Maps JavaScript API v3 Example: Place Search</title>
	<script
		src="https://maps.googleapis.com/maps/api/js?sensor=true&amp;libraries=places"></script>
	<h:outputScript name="maps.js" library="js" />

	<style>
	#map {
		height: 400px;
		width: 970px;
		margin-top: 0.5em;
		margin-left: 5px;
	}
	
	</style>
		
</h:head>
<h:body onload="carregar()">


	<div
		style="padding-top: 10px; margin-left: 5px; margin-bottom: 10px; margin-right: 5px;">

		<fieldset style="border: 1px dotted #ccc; background: #e8e8e8">
			<table>
				<tr>
					<td><label for="endereco"><strong>Endereço de
								destino</strong> </label></td>
					<td><input type="text" id="endereco" placeholder="Buscar..."
						size="25" /></td>

				</tr>
				<tr>
					<td><label for="raio"><strong>Distância</strong> </label> <label
						style="margin-left: 5px;">(metros)</label>
					</td>
					<td><input type="text" id="raio" size="10" /> <input
						type="button" value="Pesquisar" id="busca" onclick="pesquisar()"
						class="cssbutton" />
					</td>

				</tr>

			</table>

			<label style="color: blue"> *Se não for informado uma
				distância, será considerada a padrão de 200m.</label>


		</fieldset>

	</div>


	<div id="map">
	</div>

</h:body>
</html>